<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot中使用ECharts</title>
    <script type="text/javascript" th:src="@{/static/js/echarts.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/stock/stock.css}"/>
</head>
<body>
<p class="hidden" th:text="${code}"></p>
<div id="main" style="width: 1000px;height:400px;"></div>
</body>
<script type="text/javascript">
    // 初始化ECharts组件到id为main的元素上
    let myChart = echarts.init(document.getElementById('main'));
    // 定义图标的配置项
    let option = {
        title: {
            // text: 'Spring Boot中使用ECharts'
            text: '${text}'
        },
        tooltip: {},
        // x轴配置
        xAxis: {
            data: [],
            axisLabel: {
                interval: 0,
                rotate: -30
            }
        },
        // y轴配置
        yAxis: {},
        series: [{
            // 数据集（也可以从后端的Controller中传入）
            data: [],
            // 图表类型，这里使用line，为折线图
            type: 'line'
        }]
    };
    myChart.setOption(option);

    // 发起 AJAX 请求获取数据
    $.ajax({
        url: '/chapter/stock/profit/' + $("p.hidden").text(),
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            // 更新图表数据
            myChart.setOption({
                xAxis: {
                    data: response.data.categories
                },
                series: [{
                    data: response.data.values
                }],
                title: {
                    text: response.data.title
                }
            });
        }
    });
</script>
</html>